/**
Redux 是一个用于管理 JavaScript 应用程序状态的库，尤其常与 React 一起使用。它提供了一种集中式的方式来管理应用的状态，使得状态的变化更加可预测和可维护。
  1. 基本概念
  - 单一状态树：Redux 维护一个单一的状态树，整个应用的状态存储在一个对象中。
  - 不可变状态：状态是只读的，不能直接修改。要改变状态，必须通过派发（dispatch）一个动作（action）。
  - 纯函数：状态的变化通过纯函数（reducer）来实现，接收当前状态和动作作为参数，返回新的状态。

  2. 核心概念
  - Store：Redux 的存储对象，保存应用的状态。
  - Action：描述发生的事件的普通 JavaScript 对象，必须包含一个  `type`  属性。
  - Reducer：纯函数，接收当前状态和动作，返回新的状态。
  - Middleware：用于扩展 Redux 的功能，可以处理异步操作、日志记录等。

  3. 使用 Redux 的步骤
   1. 安装 Redux 和 React-Redux
  使用 npm 或 yarn 安装 Redux 和 React-Redux：
  npm install redux react-redux
   2. 创建 Store

  使用  `createStore`  函数创建 Redux store。
  import { createStore } from 'redux';

  // 定义初始状态
  const initialState = {
    count: 0,
  };

  // 定义 reducer
  const counterReducer = (state = initialState, action) => {
    switch (action.type) {
      case 'INCREMENT':
        return { count: state.count + 1 };
      case 'DECREMENT':
        return { count: state.count - 1 };
      default:
        return state;
    }
  };

  // 创建 Redux store
  const store = createStore(counterReducer);
   3. 提供 Store
  使用  `Provider`  组件将 Redux store 提供给 React 组件树。
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import App from './App'; // 你的主组件

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );
   4. 连接组件
  使用  `connect`  函数将 Redux store 的状态和动作连接到组件。
  import React from 'react';
  import { connect } from 'react-redux';

  // 定义组件
  const Counter = ({ count, increment, decrement }) => {
    return (
      <div>
        <h1>{count}</h1>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    );
  };

  // 映射状态到组件的 props
  const mapStateToProps = (state) => ({
    count: state.count,
  });

  // 映射动作到组件的 props
  const mapDispatchToProps = (dispatch) => ({
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  });

  // 连接组件
  export default connect(mapStateToProps, mapDispatchToProps)(Counter);

  4. 总结
  Redux 是一个强大的状态管理工具，适用于大型 React 应用。通过集中管理状态、使用不可变数据和纯函数，Redux 提高了应用的可预测性和可维护性。尽管 Redux 可以增加代码的复杂性，但对于需要管理大量状态的应用，它提供了清晰的结构和强大的功能。
 */
import React, { PureComponent } from 'react'
import Home from './pages/home'
import "./style.css"
import store from "./store"
import Counter from './pages/counter'

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      counter: store.getState().counter.counter
    }
  }

  componentDidMount() {
    store.subscribe(() => {
      const state = store.getState().counter
      this.setState({ counter: state.counter })
    })
  }

  render() {
    const { counter } = this.state

    return (
      <div>
        <h2>App Counter: {counter}</h2>

        <div className='pages'>
          <Counter/>
          <Home/>
        </div>
      </div>
    )
  }
}

export default App
